<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom操作</title>
    <style>
        div{
            width: 600px;
            height: 400px;
            border: 1px solid hotpink;
            margin: 50px;
            float: left;
        }
        img{
            width: 100%;
            height: 100%;
        }
        button{
            margin: 20px;
        }
    </style>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
    <script>

        $(function (){
            // 1、获得div里面的标签内容
            var html=$("#ele_div").html();
            console.log("html标签体内容是："+html);
            //2.获得div里面的纯文本内容
            var text=$("#ele_div").text();
            console.log("text的纯文本是："+text)
            // 注意：html() text() 方法里面是可以设置参数的
            //    当没有参数的时候是获取内容，有参数的时候是设置内容
            $("#btn1").click(function (){
                $("#ele_div").html("<img src='../img/1molihua.png'/>")
            });
            $("#btn2").click(function (){
                $("#ele_div").text("<img src='../img/1molihua.png'/>")
            });
            $("#btn3").click(function (){
                var name=$("#username").val();
                var password=$("#pass").val();
                alert("用户名："+name+",密码是："+password);
            });
            $("#btn4").click(function (){
                $("#username").val("李四");
               $("#pass").val("123456");
            });
        });

    </script>
</head>
<body>
<div id="ele_div">
  <h1>简单的标题</h1>
  <a href="#">普通的超链接</a>
</div>
<div id="ele_from">
    用户名：<br/>
    <input type="text" id="username" name="username"/> <br/>
    密码：<br/>
    <input type="password" id="pass" name="pass"/>
</div>
<button id="btn1">设置div的html内容</button>
<button id="btn2">设置div的文本内容</button> <br>
<button id="btn3">获取input的vlaue值</button>
<button id="btn4">设置input的value值</button>
</body>
</html>